CSS Responsive Card & Hover Effects with Flexbox | HTML CSS3 Tutorials 2021

In this video, you're going to learn how to make Responsive Cards with CSS Flexbox and we'll also add a nice transition for improving the hovering effects.
Link for my other CSS Flexbox Tutorials: • CSS Flexbox Tutorials ...
(Free Images) Credit: unsplash.com/
#CSS #flexbox #webdevelopment #responsivedesign #frontend #frontenddev

[@sivas4061]

Man, you're the lifesaver... Been checking tons of tutorials but never found anything like this.. explained precisely from top to bottom .. Keep it up man. Subscribed 👍💪

[@kartikahirrao6684]

Watched so many videos and tried this with so many pre-existing codes but kept facing problems just for you to teach me this from scratch in just 9 minutes! You sir deserve a subscribe!

[@oscarborge2543]

Just what I was looking for. Crisp explanation, with very simple steps, very easy to follow. Keep creating great content!

[@WilsonJoseph-xp5sr]

I'm watching this video and it seems like I'm in another world with your explanation, man you're a genius, that makes sense you were born to teach, you're one of the best who teaches on RUclips, congratulations, even the deaf can understand what you're transmitting, you gain another subscriber to your channel. I seem to be inside a class.

[@SchwarzerFalke]

Üstad adamsın adam. 6-7 aydır kod öğrenmeyi bırakmıştım. Tek videoda bir çok bilgi hatırladım. Eline sağlık.

[@Cobey_yt]

Man, you actually saved my Life with this video. Thanks a lot

[@RouteDeTours]

Outstanding tutorial. I wholeheartedly agree with the others on here who agree that it is far better than the vast majority of other attempts. Thankyou!

[@freetoothpicks]

gold! everything done by using very easy ways and every single part is crystal clear.

[@aaronl8443]

It could be one of the best CSS videos, for sure!

[@jokubas6180]

For me, HTML cards was a bit of a problem, but with your explanation you helped me a lot!

[@thenatricvibe3661]

This tutorial is amazing!! taught me a few new tricks I didn't know!

[@shashankkhandelwal4559]

I must say- the tutorial is very awesome. You explained everything in a perfect way to make it understand. Thanks a lot for such beautiful video..

[@rodsaunders149]

Excellent tutorial: clear and calm. Thanks very much.

[@gotdamngoblin2266]

This is a great tutorial. Will be using this method on my next project. Thank you!! 🙌

[@diegocenicerosdominguez7309]

You are excellent at explaining the process, subscribed!

[@lollilolli4582]

It's a big favor for me ! I liked how you also explain the steps .Thank you :)

[@ermasalvador1196]

Thank you so much! I've learned a lot and applied it to my webpage assignment. #Newbie here!

[@_talhaijaz]

This is very helpful tutorial but you missed one thing which is that if the content of each card is different in terms of number of lines then how to set the alignment of cards so that each section of the card would be start from same point.

[@11i22hope33this]

Awesome tutorial! Clear and easy-to-follow explanations!

[@EntertainmentInfo123]

Thanks friend for amazing tutorial

[@MeezanTheFairBloke]

Very clear and precise. Keep teaching man!

[@felixhabarugira7680]

This guy just saved my life 🤯👊🏾

[@MalaravanM]

So, this is how you explain the hardest one to simplest way?

[@uodige1]

awesome tutorial, clean and easy follow thru. thank you!

[@jatinvikram5333]

Thank you, I had lots of fun adding this in my website.

[@ritikastudies]

omg this made everything so much easier,thanks a ton!

[@edmat6710]

Indeed, very well explained! 👏👏👏

[@rayc9426]

Thank you so much! I like the way you explain that is very clear.

[@Harmon_me]

This was so helpful!! Thank you

[@ayushpal7504]

That's very helpful video for me

[@TrinaGish]

Excellent explanation and instructions!

[@Real_Burundian]

like the Way you make it simple👏🏼

[@user-pe2rs8wu1d]

How do i add a heading tag on top?
Like i want to add something or words on top like Welcome or something about my things like CARDS FOR YOU!
But it keeps going down?

[@youtischia]

This is a very nice walk thru of how to create cards. Thanks.

[@cemeygimedia]

Glad you liked it, thank you! :)

[@ijaidamarkus8425]

Superp tutorial, thank you sir

[@levankutaladze2347]

Perfect video ! Thank you

[@dreerable]

Brillant, helped with with my bootcamp

[@UnjustCrow]

Exactly what I was after! Thanks so much!

[@dineshkumar-sn5me]

Keep it up Cem. Appreciate it👍

[@user-nn5mw2dc3c]

Thank you so much. This was helpful

[@puneethroy8785]

Really helpful , good content for students. By the way the display : flex is not working for me , what could be the reason ?

[@maremeaxi3344]

please more about flexbox !! You are the best !!!

[@armaankhokhar512]

if we click on Read More btn then no any command show, what we do please help me😢

[@shemosus]

straight forward , thank you sir.

[@xviewmytubex]

What's the difference between this and just using flex values? Thanks! =)

[@style11780]

Oh my god it really helps. thank u!

[@unigamerderp7430]

Thanks dude! This is really helpful

[@cemeygimedia]

Thank you man good luck!

[@jerarldlorica1151]

Finally I found one thank you

[@lucaslorenzi6247]

thanks man, u are the best! S2

[@tamilsoldiertechnical8853]

Its a very nice video for a beginner

[@rizkygabriel7587]

Thanks for the tutorial.

[@ayushpal7504]

I have subscribed your channel

[@andybrandonbernalpacheco3944]

You are a hero, thank u

[@isamaug]

Thank you so much I enjoyed your explanation.

[@davidross1332]

how can we move the button to the bottom of the card, no matter how long the card description is? If the description is shorter than in the video, the button moves up.

[@stanleymaina8480]

A great tutorial ,i do like your explanation

[@DiegoGarcia-cl8qh]

me salvastes amigo y eso que pude entenderlo bien sin saber casi nada de ingles te agradezco mucho

[@b7x21]

How can I make them horizontal also how to make them 4x4

[@diamoua8572]

Thank you so much man!!

[@markanthonybasmayor8377]

THANK YOU SO MUCH!

[@mathematicalgeek8657]

This was an awesome tutorial. It helped me with a project. Please could you like link the place where you got those car images.

[@cemeygimedia]

Thank you, you can find these free images on unsplash.com/

[@kirzaa1830]

You're god.
Thanks

[@mayura642]

Very nice and easy explanatiom

[@eyob2020]

Thank you I like how you explain things

[@heykunaal]

Thank you brother!!

[@LeonardoSantos-jk1tp]

excellent explanation thanks

[@codecret1]

But why did you give cards fixed size in px instead of 33%

[@irniscibra5898]

just fantastic 🙃🙃

[@juhairfahmid3431]

that was very helpful😊. thank you

[@musicforyou4444]

Why the h2 and p tags cannot load when I set the background color, I don't what to do. Could you help me?

[@Mycreatop]

Thanks man ❤️

[@alanrobbo6980]

Thank you, very Helpful.

[@aer0449]

Brother thank you so much

[@ALKASHIF-]

nice

[@rhymekidstv]

Thank you for this tutorial

[@monikadesai8251]

Helpful... Thank u

[@to_al1mov]

Bro Thank you so much im so happy

[@bacltdbacltd7310]

good explanation

[@jitendrajaintwal6503]

Thank you sir

[@kidsconner]

the best

[@reignsvicky]

Your video helped me👍

[@FitnessTipsOnly0]

Very informative!!! And one doubt bro. If i create 10 cards in which there will be 5 in 1 row, if i give wrap property, will they collide each other when i decrease the screen size?

[@ogbuoaloysius7656]

i have a little challenge i added my image path in my css,i observed the image isnt showing on my .card-image,even the color aqua is completely gone,after i added the copiedcar-1 in my html class .card-image,what could be the problem?

[@cemeygimedia]

Probably the image path is wrong or some class can override another class, for these types of problems Chatgpt can be helpful

[@ogbuoaloysius7656]

@@cemeygimedia thanks a lot sir

[@Ian-bb7vv]

thank you for the video.

[@alexmercatto]

Excellent

[@nadeeradulan9231]

Smart Tutorial

[@LeonardoSantos-jk1tp]

Could you put the images in the html? or wrong series?

[@alentragesitwicaksono8405]

Thank you so much

[@verawat]

Good job sir.

[@jamesclavero6753]

i cant put the image on the container , i dunno whats wrong

[@PRODMOUS]

Subbed thankyou !

[@samanehsoltani5204]

thanks, very good

[@zacharysnyder5068]

Does anyone know how to make a full box under the cards?

[@offtrash5279]

the flex dosent work for me

[@deamore1106]

thx so much 😊

[@solvian9284]

Sadly the Readmore part it didnt show on my end its just a black block but its good content

[@alfredonovela8032]

Best Video

[@garylee450]

thank you so much!

[@cemeygimedia]

you're welcome :)

[@ismailzaidi7967]

thanks that helped me a lot (y)

[@start4285]

very good